import React, { Component, createRef } from 'react';
import { Breadcrumb, PageHeader, Button, Table, Space, Pagination, Modal, Input, message } from "antd";
import CheckLogin from "../../../hoc/CheckLogin"
import url from "../../../config/url"
import req from "../../../http/req"
import * as echarts from 'echarts';
const { Search } = Input;
class Index extends Component {
  formRef = createRef();
  constructor(props) {
    super(props);
    // 表格列声明
    this.columns = [
      {
        title: '序号', //表头的列名称
        dataIndex: 'id', //待显示数据源的字段名称（务必注意大小写）
        key: 'id', //与以前一样，必须要有，且唯一
        //数据加工处理函数，函数返回需要渲染的内容。形参1：当前字段对应的数据，形参2：当前字段所在行的整条数据
        // render: text => <a>{text}</a>,
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '影院名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '所属城市',
        key: 'city_name',
        dataIndex: 'city_name',
      },
      {
        title: '所在地区',
        key: 'district_name',
        dataIndex: 'district_name',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <a>编辑</a>
            <a>删除</a>
          </Space>
        ),
      },
    ];
    this.state = {
      page: 1,
      total: 0,
      pageSize: 10,
      current: 1,
      visible: false,
    };
  }
  bread = JSON.parse(sessionStorage.getItem("bread"))
  render() {
    const { visible } = this.state;
    let pathname = this.props.location.pathname
    let crumb = []
    this.bread.forEach(el => {
      if(pathname === el.auth_path) {
        crumb = el.auth_bread.split(",")
      }
    })
    return (
      <>
        {/* 面包屑 */}
        <Breadcrumb>
          {/* acl的auth_bread */}
          {
            crumb.map(el => {
              return <Breadcrumb.Item key={el}>{el}</Breadcrumb.Item>
            })
          }
        </Breadcrumb>
        {/* 页头 */}
        <PageHeader
          ghost={false}
          onBack={() => window.history.back()}
          title="影院列表"
          extra={[
            <Button key="btn_add" type="primary" onClick={this.loca.bind(this)}>
              影院分布
            </Button>,
          ]}
        >
        </PageHeader>
        <Space direction="vertical">
          <Search placeholder="input search text" onSearch={this.onSearch.bind(this)} enterButton />
        </Space>
        <Modal
          visible={visible}
          title="影院分布"
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              Return
            </Button>
          ]}
        >
          <div id="main" style={{ width:500, height: 400}}>

          </div>
        </Modal>
        {/* 表格
          (表格需要加rowKey属性来生成行的key，否则报错)
          （scroll属性：加滚动条）
        */}
        {/* data(数据源可变)放到state中 */}
        <Table dataSource={this.state.data} rowKey={(record) => record.id} columns={this.columns} pageination={false}/>
        {/* 分页器 */}
        <div style={{ textAlign: "center", marginTop: "25px" }}>
          <Pagination
            defaultCurrent={this.state.page}
            current={this.state.current}
            total={this.state.total}
            onChange={this.loadData}
          />
        </div>
      </>
    );
  }
  onSearch(value) {
    // 这里setState异步转同步（加一个函数作为参数）
    this.setState({
      value: value
    }, ()=>{this.loadData()})
  }
  loca() {
    this.setState({
      visible: true,
    });
  }
  handleCancel = () => {
    this.setState({ visible: false });
  };
  componentDidMount() {
    this.loadData(this.state.page)
  }
  // 加载数据
  loadData = (page) => {
    req.get(url.GetCinema, {
      params: {
        page,
        keyword: this.state.value
      }
    }).then(res => {
      if(res.data.errNo === 0) {
        this.setState({
          data: res.data.paginate.data,
          total: res.data.paginate.total,
          current: page
        })
      }
    })
  }
}

export default CheckLogin(Index);
